<template>
  <view class="viewport">
    <view class="container" :style="transFormStyle">
      <view class="sub">
        Sub Of a Driver Training System
      </view>
      <view class="base-type-back-img-area" :class="baseType">
        <!-- #ifdef APP || H5 -->
        <view class="header-go-back" @tap="goBack">
          <uni-icons type="left" size="22" color="#fff"></uni-icons>
        </view> <!-- #endif -->
      </view>
      <view class="sub right">
        Sub Of a Driver Training System
      </view>
      <view class="main-message">
        <view class="inner">
          <!-- <image @click="back" class="backImg" src="../../static/images/exam/back.png" mode="heightFix">
					</image> -->
          <view class="content leftContent">
            <view class="left_title">考试须知：</view>
            <view class="left_textItem">1.遵守考场纪律，服从监考人员指挥。</view>
            <view class="left_textItem">2.进入考场、手机关机。禁止抽烟，禁止吃零食。</view>
            <view class="left_textItem">3.未经工作人员允许，考生禁止随意出入考场。</view>
            <view class="left_textItem">4.考场内禁止大声喧哗，禁止随意走动。</view>
            <view class="left_textItem">5.考试中认真答题，不准交头接耳。</view>
            <view class="left_textItem">6.考试中不准冒名顶替，不准弄虚作假。</view>
            <view class="left_textItem">7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</view>
            <view class="left_textItem lastItem">8.爱护公物及考试设备。</view>
            <!-- #ifdef MP-WEIXIN -->
            <view class="bottom-go-back" @tap="goBack">
              <uni-icons type="left" size="22" color="#fff"></uni-icons>
            </view>
            <!-- #endif -->
          </view>
          <view class="content rightContent">
            <view class="right_title">某某考场 08号考台</view>
            <view class="right_textItem">身份证号：<text>1234566789123456789</text></view>
            <view class="right_textItem">考生姓名：<text>某某某</text></view>
            <view class="right_confirm">
              <view class="btn" @tap="toMockRealExamAnswer">
                确认
              </view>
            </view>
            <view class="right_textItem red">点击“确认”按钮开始考试!</view>
            <view class="right_tips">操作提示:每题考试答案确定后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。</view>
          </view>
        </view>

      </view>

    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
  import { ExamTypeEnum } from '@/api/constants'

  // 题库类型
  const baseType = ref<string>('km1')
  // 屏蔽旋转竖屏样式
  const transFormStyle = ref<string>('')

  onLoad((options: any) => {
    baseType.value = options.baseType
  })

  onShow(() => {

    uni.getSystemInfo({
      success: (res) => {
        let screenWidth = res.screenWidth
        let screenHeight = res.screenHeight
        let safeAreaInsets = res.safeAreaInsets
        let marginTop = 0
        let marginBottom = 0

        // #ifndef H5
        marginTop = safeAreaInsets!.top
        marginBottom = safeAreaInsets!.bottom
        // #endif

        // // #ifdef MP
        // let menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect()
        // marginTop = menuButtonBoundingClientRect.bottom;
        // // #endif

        let containerWidth = screenHeight - (marginTop + marginBottom)
        transFormStyle.value = `transform-origin: 0 0 ; transform: rotate(90deg) translateY(${-screenWidth}px);width:${containerWidth}px;height:${screenWidth}px;margin-top:${marginTop}px;margin-bottom:${marginBottom}px;`;
      }
    })

  })

  /**
 * 去模拟考试答题
 */
  const toMockRealExamAnswer = (paperId: number) => {
    uni.navigateTo({
      url: `/pagesExam/mockRealExamAnswer/mockRealExamAnswer?baseType=${baseType.value}&examType=${ExamTypeEnum.MockRealExam}`
    })
  }


  onUnload(() => {

  })

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  @import '@/pagesExam/static/imgVars.scss';

  .page {
    background-color: #000;

  }

  .viewport {
    background-color: #000;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f1f4ed;

    .sub {
      color: rgb(147, 146, 145);
      font-style: italic;
      font-size: 20rpx;
      line-height: 26rpx;
      height: 26rpx;
      width: 100%;

      &.right {
        text-align: right;
      }
    }

    .base-type-back-img-area {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 105rpx;
      width: 100%;
      background-position: 0 0;
      background-size: 100% 100%;

      &.km1 {
        background-image: url($real-mock-exam-km1-bg)
      }

      &.km4 {
        background-image: url($real-mock-exam-km4-bg)
      }

      /* #ifdef APP || H5*/
      .header-go-back {
        margin-left: 23rpx;
        width: 50rpx;
        height: 50rpx;
        background-color: #787a76;
        border: 1rpx solid #616360;
        border-radius: 50%;
      }

      /* #endif */

    }

    .main-message {
      height: calc(100vw - 180rpx);
      background-color: #FFFFFF;
      width: 100%;
      padding: 16rpx 28rpx 23rpx;

      .inner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        border: 1rpx solid #000;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #f1f4ed;

        .backImg {
          height: 36rpx;
          width: 36rpx;
          margin-left: 20rpx;
          position: absolute;
          left: 5vh;
          bottom: 4vw;
        }

        .content {
          width: 47vh;
          height: 100%;
          color: rgb(30, 30, 31);
          padding-top: 32rpx;
          box-sizing: border-box;
        }

        .leftContent {
          padding-left: 36rpx;
          border-right: 1rpx solid #000;

          .left_title {
            margin-bottom: 40rpx;
            font-size: 26rpx;
            line-height: 1.8;

          }

          .left_textItem {
            font-size: 24rpx;
            line-height: 1.8;

          }

          /* #ifdef MP-WEIXIN */
          .bottom-go-back {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20rpx;
            margin-left: -20rpx;
            width: 50rpx;
            height: 50rpx;
            background-color: #787a76;
            border: 1rpx solid #616360;
            border-radius: 50%;
          }

          /* #endif */
        }

        .rightContent {
          padding-left: 36rpx;
          padding-right: 36rpx;

          .right_title {
            margin-bottom: 28rpx;
            font-size: 30rpx;
            font-weight: bold;
          }

          .right_textItem {
            font-size: 28rpx;
            line-height: 1.8;
            color: rgb(249, 51, 40);
            font-weight: bold;
          }

          .right_confirm {
            margin: 30rpx 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            .btn {
              width: 167rpx;
              height: 63rpx;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              border: 1rpx solid #000;
              color: rgb(21, 21, 21);
              border-radius: 10rpx;
              font-size: 30rpx;
              background-color: #ffffff;
              font-weight: bold;

            }
          }

          .right_tips {
            margin-top: 20rpx;
            font-size: 22rpx;
            line-height: 1.8;
            color: rgb(78, 77, 77);
          }
        }
      }

    }


  }

</style>
